<template>
    <div>
        <el-form ref="formSearch" :model="formSearch" label-width="100px" size="small" :inline="true">
            <el-col :span='14'>
                <el-form-item>
                    <el-upload :action="actionUrl" :data="{projectListId: this.projectId}" :headers="uploadHeaders" name="file" :show-file-list="false" :limit='1' accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt,"
                               :on-success="uploadSuccess" :on-error="uploadError">
                        <el-button size="small" type="primary">上传</el-button>
                        <span slot="tip" class="el-upload__tip">支持格式 doc、docx、xls、xlsx、ppt、pptx、pdf、txt</span>
                    </el-upload>
                </el-form-item>
            </el-col>
            <el-col :span='8' :offset="2" align='right'>
                <el-form-item>
                    <el-input v-model="formSearch.name" placeholder="请输入报告名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchFormSubmit()">搜索</el-button>
                </el-form-item>
            </el-col>
        </el-form>
        <!-- 表格 -->
        <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @current-change='currentChange' @size-change="sizeChange">
            <template slot-scope="scope" slot="menu">
                <el-button type="primary" size="small"  plain @click.stop="handlePreview(scope.row,scope.index)">预览</el-button>
                <el-button type="primary" size="small"  plain @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
                <a class="el-button el-button--primary el-button--small is-plain" @click="handleDownload(scope.row,scope.index)"
                   :href="axiosUrl +'/projectReport/v1/auth/getFileNameUrl?getFileNameUrl='+scope.row.url+'&id='+scope.row.id" download="下载">下载</a>
            </template>
        </avue-crud>
    </div>
</template>

<script>
    import { infoTableOption } from "@/const-personal/ledger/projectLedger.js"
    import { getProjectPresentation,addProjectPresentation,delProjectPresentation ,previewProjectPresentation} from "@/api/ledger/progect"
    import website from '@/const/website';
    import { getToken } from '@/util/auth'
    import { getStore } from '@/util/store'
    export default {
        name: "项目报告",
        data() {
            return {
                projectId: getStore({ name: 'projectId'}),
                formSearch:{
                    name:''
                },
                tableOption:infoTableOption,
                page: {
                    total: 10, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 5, //每页显示多少条
                    pageSizes: [5,10,20]
                },
                tableLoading: false,
                tableData:[],//数据
                // 上传文件
                actionUrl: website.axiosUrl + '/projectReport/v1/insert/upload',
                axiosUrl: website.axiosUrl,
                uploadHeaders: {
                    Authorization: getToken()
                },
            }
        },
        mounted(){
            this.searchFormSubmit()
        },
        methods: {
            // 预览
            handlePreview(row,index){
                const href =  website.axiosUrl +row.url+"?id="+row.id
                window.open(href, '_blank')
                previewProjectPresentation(row.id).then(res =>{
                    if(res.data.code==200) {
                        this.searchFormSubmit()
                    }
                })
            },
            // 下载
            handleDownload(row,index){
                this.tableData[index].downloadNumber += 1;
            },
            // 删除
            handleDelete(row,index){
                this.$confirm('是否将该资料（'+row.fileOldName+'）从项目资料中删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delProjectPresentation(row.id).then(res =>{
                        if(res.data.code==200){
                            this.$notify({ title: '操作成功', type: 'success', message: '已成功删除该项目资料!'});
                            this.searchFormSubmit();
                        } else {
                            this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
                        }
                    })
                }).catch(() => {
                    this.$notify({ title: '已取消删除', type: 'info', });
                });
            },
            //上传
            handleUpload(){},
            // 搜索
            searchFormSubmit() {
                let data = { fileOldName: this.formSearch.name,
                    projectListId: this.projectId}
                data.page = this.page.currentPage;
                data.size = this.page.pageSize;
                getProjectPresentation(data).then(res =>{
                    if(res.data.code==200){
                        this.tableData = res.data.data.list;
                        this.page.total = res.data.data.total;
                        this.page.currentPage = res.data.data.pageNum;
                        this.page.pageSize = res.data.data.pageSize;
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取项目资料失败！', type: 'danger', });
                    }
                })
            },
            // 分页
            currentChange(page){
                this.page.currentPage = page;
                this.searchFormSubmit();
            },
            //分页大小
            sizeChange(val){
                this.page.pageSize = val;
                this.searchFormSubmit();
            },
            // 文件上传成功
            uploadSuccess(response, file) {
                if (response.code === 200) {
                    this.$notify({ title: '上传成功', type: 'success', message: '已成功上传项目资料!'});
                    this.searchFormSubmit()
                } else {
                    this.$notify.error({ title: '上传失败', message: '上传项目资料失败！', type: 'danger', });
                }
            },
            // 文件上传失败
            uploadError(err, file) {
                this.$notify.error({ title: '上传失败', message: '上传项目资料失败！', type: 'danger', });
            }
        }
    };
</script>

<style scoped>
    .el-upload__tip{
        margin-left: 10px;
        vertical-align: text-top
    }
</style>